<template>
	<view class="u-m-t-20">
		<view class="step-box u-m-b-15">
			<view class="item" :class="step == (index+1)?'on':''" v-for="(item,index) in stepArr" :key="index">
				<text class="num">{{index+1}}</text><text class="text">{{item}}</text>
			</view>
		</view>
		<view class="container" v-show="step == 1">
			<u-form :model="form" ref="uForm" :label-width="'200'" :errorType="errorType">
				<u-form-item label="原手机号码" prop="name">
					<!-- <u-input :border="false" placeholder="请输入原手机号码" v-model="form.oldMobile" type="number"></u-input> -->
					<text>{{form.oldMobile}}</text>
				</u-form-item>
				<u-form-item label="短信验证码" class="inputarea" prop="mobilecaptcha">
					<u-input v-model="form.oldCaptcha" :disabled='inputstate' type="text" :clearable="false" :border="false" class="input" placeholder="输入验证码" borderColo/>
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" ref="uOldCode" @change="oldCodeChange"></u-verification-code>
						<u-button size="mini" @click="getTelCode(1)">{{oldtips}}</u-button>
					</view>
				</u-form-item>
			</u-form>
			<u-button class="u-m-t-30" type="primary" @click="checkMobileCaptch(form.oldMobile,form.oldCaptcha,false)">验证原手机</u-button>
		</view>
		<view class="container" v-show="step == 2">
			<u-form :model="form" ref="uForm" :label-width="'200'" :errorType="errorType">
				<u-form-item label="新手机号码" prop="name">
					<u-input :border="false" placeholder="请输入新手机号码"   v-model="form.newMobile" type="number"></u-input>
				</u-form-item>
				<u-form-item label="短信验证码" class="inputarea" prop="mobilecaptcha">
					<u-input v-model="form.newCaptcha" type="text"  :disabled='inputstate1' :clearable="false" :border="false" class="input" placeholder="输入验证码" borderColo/>
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" ref="uNewCode" @change="newCodeChange"></u-verification-code>
						<u-button size="mini" @click="getTelCode(2)">{{newtips}}</u-button>
					</view>
				</u-form-item>
			</u-form>
			<u-button class="u-m-t-30" type="primary" @click="changeMobile">确认更换</u-button>
		</view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close"
			:pintuImg="pintuImg" :pintukuai="pintukuai" :ynumber="ynumber" ref="verifyElement"></slider-verify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputstate:true,
				inputstate1:true,
				stepArr: ['验证旧手机', '更换新手机'],
				step: 1,
				errorType: ['toast'],
				form: {
					oldMobile: '',
					oldCaptcha: '',
					newMobile: '',
					newCaptcha: ''
				},
				seconds: 60,
				oldtips: '',
				newtips: '',
				// 滑块验证参数
				sliderVerifyFLag: false,
				pintuImg: '',
				pintukuai: '',
				ynumber: 0
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userdetail
			}
		},
		mounted() {
			this.form.oldMobile = this.userInfo.mobile
		},
		methods: {
			oldCodeChange(text) {
				this.oldtips = text;
			},
			newCodeChange(text) {
				this.newtips = text;
			},
			// 点击获取验证码
			getTelCode(step) {
				if(step == 1){
					if (this.form.oldMobile == '') {
						uni.showToast({
							title: '请输入旧手机号码',
							icon: 'none'
						})
						return
					}
					if (this.$refs.uOldCode.canGetCode) {
						this.getSlideCaptch()
						this.inputstate = false
					}
				}
				
				if(step == 2){
					if (this.form.newMobile == '') {
						uni.showToast({
							title: '请输入新手机号码',
							icon: 'none'
						})
						return
					}
					if (this.$refs.uNewCode.canGetCode) {
						this.getSlideCaptch()
						this.inputstate1 = false
					}
				}
			},
			// 获取滑块验证信息
			getSlideCaptch() {
				this.$u.get('/SlideCaptcha/GetSlideCaptcha').then((res) => {
					this.pintuImg = res.src1
					this.pintukuai = res.src2
					this.ynumber = res.ynumber
					this.form.guid = res.guidid
					this.sliderVerifyFLag = true
				})
			},
			// 滑块验证结果回调函数
			verifyResult(oldx) {
				this.form.countresult = Math.round(oldx);
				//step参数1为验证旧手机，2为更换新手机
				if(this.step == 1){
					// this.decideCode()
					this.getOldCode()
				}else{
					// let form = {
					// 	account: this.form.account,
					// 	password: this.form.password,
					// 	countresult: this.form.captcha,
					// 	guid: this.form.guid
					// }
					// this.loginApi(form)
					this.getNewCode()
				}
				
				// this.sliderVerifyFLag = false;
			},
			// 关闭滑块验证弹窗
			close(state) {
				this.sliderVerifyFLag = state
			},
			// 刷新滑块验证
			refresh(state) {
				if (state) {
					this.getSlideCaptch();
				}
			},
			getOldCode() {
				if(this.$refs.uOldCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在验证...'
					})
					this.$u.get('/User/SendOldMobileCaptcha?mobile='+this.form.oldMobile+ '&guid=' + this.form.guid +
						'&countresult=' + this.form.countresult).then((res) => {
						this.sliderVerifyFLag = false;
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uOldCode.start();
					}).catch((res) => {
						// if(res.data.msg.err){
						// 	this.sliderVerifyFLag = false;
						// 	return
						// }
						try {
							if(res.data.msg.err){
								this.sliderVerifyFLag = false;
								return
							}
						} catch (e) {
							//重试
							this.sliderVerifyFLag = false;
							return
						}
						this.$refs.verifyElement.refreshVerify();
						this.form.countresult = "";
					})
				} else {
					this.getSlideCaptch();
				}
			},
			getNewCode(){
				if(this.$refs.uNewCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在验证...'
					})
					this.$u.get('/User/SendNewMobileCaptcha?mobile='+this.form.newMobile+ '&guid=' + this.form.guid +
						'&countresult=' + this.form.countresult).then((res) => {
						this.sliderVerifyFLag = false;
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uNewCode.start();
					}).catch((res) => {
						try {
							if(res.data.msg.err){
								this.sliderVerifyFLag = false;
								return
							}
						} catch (e) {
							//重试
							this.sliderVerifyFLag = false;
							return
						}
						
						// if(res.data.msg.err){
						// 	this.sliderVerifyFLag = false;
						// 	return
						// }
						this.$refs.verifyElement.refreshVerify();
						this.form.countresult = "";
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			checkMobileCaptch(Mobile,Captch,IsNew = false){
				this.$u.get('/User/CheckMobileCaptcha?Captcha='+Captch).then((res) => {
					if(IsNew == false){
						this.step = 2
					}
				})
			},
			changeMobile(){
				this.$u.post('/User/ChangeMobile',this.form).then((data) => {
					uni.showToast({
						title: data.msg
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/login/login'
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*自定义步骤条*/
	.step-box {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		margin-bottom: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		height: 100rpx;
		background: #fff;
		z-index: 99;
		border-bottom: 1px solid $u-color-light;
	
		.item {
			padding: 0 30rpx;
			color: $u-color-grey;
			font-size: 28rpx;
			font-family: "uicon-iconfont" !important;
	
			&::after {
				content: "\e605";
				padding-left: 60rpx;
			}
	
			&:last-child:after {
				content: '';
				padding: 0;
			}
	
			&.on {
				color: $u-color-main;
	
				.num {
					color: #fff;
					background-color: $u-color-main;
				}
			}
	
			.num {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 48rpx;
				height: 48rpx;
				background-color: $u-color-light;
				color: $u-color-grey;
				font-size: 24rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}
	
	.container{
		background-color: #fff;
		padding: 30rpx;
	}
	
	.inputarea {
		position: relative;
		
		.icon {
			position: absolute;
			top: 36rpx;
			left: 20rpx;
		}
		
		.codeImg {
			position: absolute;
			width: 120rpx;
			height: 50rpx;
			top: 30rpx;
			right: 10rpx;
		}
		
		.wrap {
			position: absolute;
			top: 20rpx;
			right: 10rpx;
			padding: 0;
			border: 0;
			background: inherit;
			z-index: 999;
			
		}
	}
</style>
